<template>

<div>
  <top-lump>
    <div class="layui-btn-group">
      <router-link to="/queryInterface">
        <button class="layui-btn">
          <i class="layui-icon">&#xe65c;</i>
        </button>
      </router-link>
    </div>
    <div class="layui-btn-group">
      <button class="layui-btn" v-on:click="openTestInterface()">测试接口</button>
    </div>
        <span class="layui-breadcrumb kgo-top-lump-breadcrumb" lay-separator="#">
          <a># 展示接口</a>
        </span>

  </top-lump>

  <info-lump>
            <base-card title="接口信息">
            <table class="layui-table">
                <colgroup>
                    <col>
                    <col width="40%">
                    <col>
                    <col width="40%">
                </colgroup>
                <tbody>
                    <tr>
                        <td>接口名称</td>
                        <td class="kgo-input-td">{{thisInterface.name}}</td>
                        <td>所属模块</td>
                        <td class="kgo-input-td">{{thisInterface.moduleId}}</td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td class="kgo-input-td">{{thisInterface.url}}</td>
                        <td>项目排序</td>
                        <td class="kgo-input-td">{{thisInterface.index}}</td>
                    </tr>
                    <tr>
                        <td>接口状态</td>
                        <td class="kgo-input-td">{{thisInterface.status}}</td>
                        <td>返回值类型</td>
                        <td class="kgo-input-td">{{thisInterface.responseType}}</td>
                    </tr>
                    <tr>
                        <td>请求方式</td>
                        <td class="kgo-input-td">{{thisInterface.methodType}}</td>
                        <td>接口实现类</td>
                        <td class="kgo-input-td">{{thisInterface.realizeClass}}</td>
                    </tr>
                    <tr>
                        <td>版本号</td>
                        <td class="kgo-input-td">{{thisInterface.version}}</td>
                        <td>根路径</td>
                        <td class="kgo-input-td">{{thisInterface.rootUrl}}</td>
                    </tr>
                    <tr>
                        <td>项目描述</td>
                        <td class="kgo-input-td" style="height:100px;"  colspan="3">{{thisInterface.remark}}</td>
                    </tr>
                </tbody>
            </table>
        </base-card>

         <!--  **********************************************************************************************    -->
         <!--     新增请求参数     -->
         <!--  **********************************************************************************************    -->
        <base-card title="请求参数">
              <table class="layui-table kgo-table-params">
                <colgroup>
                    <col width="15%">
                    <col width="10%">
                    <col width="10%">
                    <col width="15%">
                    <col width="40%">
                    <col width="8%">
                </colgroup>
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>是否必选</th>
                        <th>参数类型</th>
                        <th>默认值</th>
                        <th>备注</th>

                    </tr>
                </thead>
                <tbody>
                    <tr v-for="param in params">
                        <td class="kgo-input-td">{{param.name}}</td>
                        <td class="kgo-input-td">{{param.isMust}}</td>
                        <td class="kgo-input-td">{{param.type}}</td>
                        <td class="kgo-input-td">{{param.defaultValue}}</td>
                        <td class="kgo-input-td">{{param.remark}}</td>
                    </tr>
                </tbody>
            </table>
        </base-card>

          <!--   新增返回参数    -->
        <base-card title="返回参数">
            <table class="layui-table kgo-table-params">
                <colgroup>
                    <col width="18%">
                    <col width="12%">
                    <col width="12%">
                    <col width="55%">
                </colgroup>
                <thead>
                    <tr>
                        <th>参数名</th>
                        <th>参数类型</th>
                        <th>默认值</th>
                        <th>备注</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="responseParam in responseParams">
                        <td class="kgo-input-td">{{responseParam.name}}</td>
                        <td class="kgo-input-td">{{responseParam.type}}</td>
                        <td class="kgo-input-td">{{responseParam.defaultValue}}</td>
                        <td class="kgo-input-td">{{responseParam.remark}}</td>
                    </tr>
                </tbody>
            </table>
        </base-card>
        <!--     返回示例      -->
        <base-card title="返回示例">

            <table class="layui-table">
                <colgroup>
                    <col width="15%">
                    <col width="80%">
                </colgroup>
                <tbody>
                    <tr>
                        <td>正确返回示例</td>
                        <td class="kgo-input-td" style="height:200px;">{{thisInterface.successExample}}</td>
                    </tr>
                    <tr>
                        <td>错误返回示例</td>
                        <td class="kgo-input-td" style="height:200px;">{{thisInterface.failExample}}</td>
                    </tr>
                </tbody>
            </table>
        </base-card>

  </info-lump>

</div>

</template>

<script>
export default {
    data () {
        return {
            thisInterface:{},
            params:[],
            responseParams:[]
        }
    },
   created(){
        var url = this.$store.state.RootURL + "/interface/id";
        var that = this;
        var interfaceId = this.$route.params.id;
        $.ajax({
            url: url,
            type:"get",
            async: false,
            dataType:'json',
            data:{id:interfaceId},
            success: function(data){
               if(KgoUtil.objIsNull(data.data)){
                     layer.msg("为获取到该接口信息");
                     return;
               }
               that.thisInterface = data.data;
               that.params = JSON.parse(KgoUtil.objIsNotNull(data.data.params) ? data.data.params : "[]");
               that.responseParams = JSON.parse(KgoUtil.objIsNotNull(data.data.responseParams)  ? data.data.responseParams : "[]");

            }
        });

   },
   mounted(){
    layui.element.init();
   },
   methods:{
     openTestInterface:function(){
        var that = this;
        $.ajax({
              url: "./static/layerPage/testInterfacePage.html",
              type:"GET",
              async: true,
              dataType:'html',
              success: function(data){
                    KgoUtil.setState("TestInterfaceParam",that.thisInterface);
                    KgoUtil.setState("RootURL",that.$store.state.RootURL);

                    layer.open({
                        title: '测试接口',
                        area: ['1000px', '820px'],
                        type:1,
                        btn:null,
                        content: data,
                        end:function(){


                        }
                    });
              }
          });


     }





   }
}
</script>

<style lang="scss">
.interface-content-sty{
  height: 100%;
  width: 98%;
  text-align: center;
  padding-top: 20px;
  background-color: #ffffff;
  margin-left: 10px;
}
.interface-content-sty>h1{
  font-weight: 800;
  font-size: 2em;
}
.kgo-table-params thead th{
   text-align: center;
}
.kgo-table-params .kgo-input-td{
  height: 30px;
  text-align: center;
}
</style>
